.code-block {
  border: 1px solid rgba(208, 212, 217, 0.5);
  background-color: #fafafa;
  margin: 10px 0;
  // 文章参考 ==> https://blog.csdn.net/weixin_44296929/article/details/103736185
  counter-reset: code; // 创建一个计数器 code
  .code-block-item {
    padding: 4px 10px;
    font-family: Source Code Pro;
    &::before {
      counter-increment: code 1; // 为 code 计数器每次增加1
      content: counter(code);
      display: inline-block;
      position: absolute;
      text-align: right;
      font-size: 12px;
      color: #c6c7c9;
      line-height: 24px;
      max-width: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: -35px;
      min-width: 20px;
    }
  }
}
.code-block-hover {
  position: fixed;
  display: none;
  // padding-bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999999999999;
  .hover-content {
    animation: hoverToobar 0.5s;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px rgba(229, 229, 229, 0.6);
    font-size: 12px;
    color: #333;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    .driver {
      display: block;
      width: 1px;
      height: 20px;
      margin: 0 8px;
      background: #e5e5e5;
    }
  }
}
@keyframes hoverToobar {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
